<template>
	<view class="">
		<u-navbar leftIcon=" " title="我的"></u-navbar>
		<view class="flex-col page">
		  <view class="flex-col group_3">
		    <view class="flex-row justify-between section_3">
		      <view class="flex-row group_5">
		        <image
					@click="loginFun('img')"
		          class="image_7"
		          :src="headUrl ? headUrl : 'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648597249865767132.png'"
		        />
		        <view class="flex-col items-start space-y-25 group_6" v-if="!phone">
		          <view class="group_7" @click="loginFun('phone')">
		            <text class="text_4">登录</text>
		            <text class="text_6">|</text>
		            <text class="font_3 text_5">注册</text>
		          </view>
		          <text class="text_8">登录后可查看更多精彩内容</text>
		        </view>
				<text v-else class="text_16">{{wcNickname || '欢迎使用'}}</text>
		      </view>
			  <view class="flex-row group_4" style="opacity: 0;">
			    <text class="font_4 text_7">设置</text>
			    <image
			      class="image_8"
			      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387356634033880.png"
			    />
			    <image
			      class="image_6"
			      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16648597251121602309.png"
			    />
			  </view>
		    </view>
		    <view class="flex-col section_4">
		      <view class="flex-row space-x-30 equal-division">
		        <view class="flex-col space-y-28 equal-division-item">
		          <view class="flex-row justify-between" @click="jumpPage('contract','mine')">
		            <text class="font_5">我的合同</text>
		            <image
		              class="image_9"
		              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387356842987877.png"
		            />
		          </view>
		          <text class="font_6 text_9">包含已结清和未结清</text>
		        </view>
		        <view class="flex-col space-y-28 equal-division-item_2">
		          <view class="flex-row justify-between" @click="jumpPage('order','mine')">
		            <text class="font_5">我的订单</text>
		            <image
		              class="image_9"
		              src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387356842987877.png"
		            />
		          </view>
		          <text class="font_6 text_10">包含已授权和未授权</text>
		        </view>
		      </view>
		    </view>
		    <view class="flex-col section_5">
		      <view class="flex-row equal-division_2">
		        <view class="flex-col items-start equal-division-item_3">
		          <text class="font_7 text_12">合作次数</text>
		          <text @click="jumpPage('contract','mine')" class="font_2 text_11">{{phone ? cooperationCount : '-'}}</text>
		        </view>
		        <view class="horiz-divider"></view>
		        <view class="flex-col items-start equal-division-item_3">
		          <text class="font_7 text_12">案件数</text>
		          <text @click="jumpPage('order','mine')" class="font_2 text_11">{{phone ?orderCount : '-'}}</text>
		        </view>
		        <view class="horiz-divider"></view>
		        <view class="flex-col items-start equal-division-item_3">
		          <text class="font_7 text_12">专利监管数</text>
		          <text @click="jumpPage('supervise','mine')" class="font_2 text_11">{{phone ?patentCount : '-'}}</text>
		        </view>
		      </view>
		    </view>
		    <view class="flex-col section_6">
		      <view class="flex-row space-x-8 section_7">
		        <image
		          class="image_10"
		          src="https://zznc.ahyzg.com/image/erpbanner.png"
		        />
		        <!-- <text class="text_13">这是一条广告条 占位使用</text> -->
		      </view>
		    </view>
		    <view class="flex-col space-y-20 section_8">
		      <text class="font_3 text_14">我的数据</text>
		      <view class="flex-col">
		        <view class="flex-row justify-between list-item" :key="i" v-for="(item, i) in list_DSRYCfDd" @click="jumpPage(item.url,'mine')">
		          <view class="flex-row space-x-32">
		            <image
		              class="image_11"
		              :src="`https://zznc.ahyzg.com/image/${item.image}.png`"
		            />
		            <view class="flex-col items-start space-y-9">
		              <text class="font_4 text_15">{{item.name}}</text>
		              <text class="font_8 text_16">{{item.des}}</text>
		            </view>
		          </view>
		          <image
		            class="image_12"
		            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387357053137678.png"
		          />
		        </view>
		      </view>
		    </view>
		    <view class="flex-col section_9">
		      <text class="font_3 text_17">我的服务</text>
		      <view class="divider"></view>
		      <view class="flex-row space-x-127 group_9">
		        <image
				  @click="jumpPage('commonPage','feedback')"
		          class="image_14"
		          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387362949745566.png"
		        />
		        <image
				  @click="jumpPage('cooperation','cooperation')"
		          class="image_15"
		          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387362819586203.png"
		        />
		      </view>
		      <view class="flex-row space-x-62 group_10">
		        <text class="font_7">问题反馈</text>
		        <text class="font_7 text_18">加盟合作</text>
		      </view>
		    </view>
		    <view class="flex-col section_10">
		      <view class="flex-row justify-between group_11" @click="jumpPage('commonPage','aboutus')">
		        <text class="font_9 text_19">关于我们</text>
		        <image
				  
		          class="image_9 image_16"
		          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387357053137678.png"
		        />
		      </view>
		      <view class="flex-row justify-between group_12">
		        <text class="font_9 text_20">版本号</text>
		        <text class="font_9 text_21">V{{version}}</text>
		      </view>
		    </view>
		  </view>
		</view>
		<u-notify message="正在建设..." ref="uNotify"></u-notify>
		<u-popup :show="isLoginshow" mode="center"  @close="closePage">
			<login @closePage="closePage" :type="isType"></login>
		</u-popup>
	</view>
</template>

<script>
	import {userInfo} from '@/api/index.js'
	import login from '@/components/login2.vue';
	export default {
		components:{login},
		data() {
			return {
				list_DSRYCfDd:[
					{name:'专利监管',des:'专利状态、专利费用监管',image:'wode-icon-zhuanlijianguan',url:'supervise'},
					{name:'专利预警',des:'第一时间了解竞争对手专利领域动向',image:'wode-icon-zhuanliyujing',url:'early'}
				],
				cooperationCount:0,
				patentCount:0,
				orderCount:0,
				isLoginshow:false,
				isType:'',
				headUrl:'',
				phone:'',
				wcNickname:'',
				version:'1.0.0'
			};
		},
		onLoad() {
			this.initUserInfo();
			this.userInfoFun();
			this.getVersion();
		},
		methods:{
			getVersion(){
				// #ifdef MP-WEIXIN
				const accountInfo = wx.getAccountInfoSync();
				if(accountInfo.miniProgram.envVersion=='release'){
				    this.version = accountInfo.miniProgram.version;
				}
				// #endif
			},
			initUserInfo(){
				let infos = this.$userInfo() || {};
				this.headUrl = infos.headUrl || '';
				this.phone = infos.phone || '';
				this.wcNickname = infos.wcNickname || '';
			},
			userInfoFun(){
				if(this.$userInfo() && this.$userInfo().id) {					
					userInfo({id:this.$userInfo().id}).then(res => {
						if(res.code === 200) {
							let { cooperationCount, patentCount, orderCount } = res.data;
							this.orderCount = orderCount;
							this.cooperationCount = cooperationCount;
							this.patentCount = patentCount;
						}
					})
				}
			},
			jumpPage(page,value){
				let info = typeof value == 'object' ? JSON.stringify(value) : value;
				if(page == 'early') {
					this.$refs.uNotify.show({
						top: 0,
						type: 'warning',
						color: '#fff',
						bgColor: '#f9ae3d',
						message: '正在建设...',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop:true
					})
					return;
				}
				uni.navigateTo({
					url:`../${page}/${page}?info=${info}`
				})
			},
			closePage(){
				this.isLoginshow = false;
				this.initUserInfo();
				this.userInfoFun();
			},
			loginFun(type){
				this.isType = type;
				this.isLoginshow = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
  background-color: #f4f6f8;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  .group_3 {
    // padding-bottom: 41rpx;
    flex: 1 1 auto;
    overflow-y: auto;
    .section_3 {
      padding: 0 17rpx 38rpx 37rpx;
      background-color: #2f87f2;
      background-image: linear-gradient(0deg, #7e87ff 0%, #3c9cff 100%);
      .group_5 {
        margin-top: 30rpx;
        .image_7 {
          width: 88rpx;
          height: 88rpx;
        }
		.text_16 {
		align-self: center;
		color: #ffffff;
		font-size: 34rpx;
		font-family: Microsoft YaHei;
		line-height: 34rpx;
		}
        .space-y-25 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 25rpx;
          }
          .group_7 {
            line-height: 33rpx;
            .text_4 {
              color: #ffffff;
              font-size: 34rpx;
              font-family: Microsoft YaHei;
              line-height: 31rpx;
            }
            .text_6 {
              color: #ffffff;
              font-size: 26rpx;
              font-family: Microsoft YaHei;
              line-height: 27rpx;
            }
            .text_5 {
              color: #ffffff;
            }
          }
          .text_8 {
            color: #f5faff;
            font-size: 18rpx;
            font-family: Microsoft YaHei;
            line-height: 19rpx;
          }
        }
        .group_6 {
          margin: 6rpx 0 5rpx 31rpx;
        }
      }
      .group_4 {
        padding: 38rpx 0 97rpx;
        width: 269rpx;
        position: relative;
        .text_7 {
          margin-left: 210rpx;
          color: #ffffff;
        }
        .image_8 {
          margin-left: -94rpx;
          margin-top: 6rpx;
          width: 25rpx;
          height: 21rpx;
        }
        .image_6 {
          width: 269rpx;
          height: 162rpx;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          position: absolute;
        }
      }
    }
    .section_4 {
      margin: -62rpx 20rpx 0;
      padding: 17rpx 0 20rpx;
      background-color: #ffffff;
      box-shadow: 0px 3rpx 5rpx #0000001a;
      border-radius: 10rpx;
      position: relative;
      .space-x-30 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 30rpx;
        }
        .space-y-28 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 28rpx;
          }
          .font_5 {
            font-size: 30rpx;
            font-family: Microsoft YaHei;
            line-height: 29rpx;
            color: #ffffff;
          }
          .font_6 {
            font-size: 22rpx;
            font-family: Microsoft YaHei;
            line-height: 22rpx;
            font-weight: 300;
            color: #ffffff;
          }
          .text_9 {
            align-self: flex-start;
            line-height: 21rpx;
          }
          .text_10 {
            align-self: flex-start;
            line-height: 21rpx;
          }
        }
        .equal-division-item {
          padding: 28rpx 20rpx 33rpx 30rpx;
          flex: 1 1 320rpx;
          border-radius: 10rpx;
          background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387356784483617.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          height: 140rpx;
        }
        .equal-division-item_2 {
          padding: 28rpx 20rpx 33rpx 30rpx;
          flex: 1 1 320rpx;
          border-radius: 10rpx;
          background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16639387356914390911.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          height: 140rpx;
        }
      }
      .equal-division {
        margin-left: 23rpx;
        margin-right: 17rpx;
      }
    }
    .section_5 {
      margin-top: 22rpx;
      padding: 32rpx 0 30rpx;
      background-color: #ffffff;
      .equal-division_2 {
        margin-left: 46rpx;
        margin-right: 48rpx;
        .equal-division-item_3 {
          flex: 1 1 219rpx;
          padding: 17rpx 28rpx;
          .text_12 {
            margin-left: 20rpx;
            margin-top: 35rpx;
          }
          .font_2 {
            font-size: 40rpx;
            font-family: Microsoft YaHei;
            line-height: 40rpx;
            color: #5677fc;
          }
          .text_11 {
            margin-left: 33rpx;
            margin-top: -88rpx;
          }
        }
        .horiz-divider {
          margin: 3rpx 0 24rpx;
          background-color: #cccccc;
          width: 1rpx;
          height: 69rpx;
        }
      }
    }
    .section_6 {
      margin-top: 20rpx;
      padding: 20rpx 0 21rpx;
      background-color: #ffffff;
      .space-x-8 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 8rpx;
        }
        .image_10 {
          // width: 155rpx;
          height: 95rpx;
        }
        .text_13 {
          align-self: center;
          color: #fd7a1a;
          font-size: 34rpx;
          font-family: HYk1gj;
          line-height: 33rpx;
        }
      }
      .section_7 {
        margin: 0 10rpx;
        padding: 5rpx 51rpx 0;
        background-color: #fff1e6;
        border-radius: 50rpx;
      }
    }
    .space-y-20 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 20rpx;
      }
      .text_14 {
        align-self: flex-start;
        line-height: 34rpx;
      }
      .list-item {
        padding: 21rpx 20rpx 19rpx 21rpx;
        border-bottom: solid 2rpx #f1f1f1;
        &:first-of-type {
          border-top: solid 2rpx #f1f1f1;
        }
        .space-x-32 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-left: 32rpx;
          }
          .image_11 {
            align-self: center;
            filter: drop-shadow(0px 5rpx 7rpx #00000026);
            width: 40rpx;
            height: 40rpx;
          }
          .space-y-9 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-top: 9rpx;
            }
            .text_15 {
              line-height: 28rpx;
            }
            .font_8 {
              font-size: 24rpx;
              font-family: Microsoft YaHei;
              line-height: 22rpx;
              font-weight: 300;
              color: #999999;
            }
            .text_16 {
              line-height: 23rpx;
            }
          }
        }
        .image_12 {
          align-self: center;
          width: 11rpx;
          height: 21rpx;
        }
      }
    }
    .section_8 {
      margin-top: 18rpx;
      padding: 25rpx 20rpx 44rpx;
      background-color: #ffffff;
    }
    .font_3 {
      font-size: 34rpx;
      font-family: Microsoft YaHei;
      line-height: 33rpx;
      color: #555555;
    }
    .font_4 {
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      line-height: 27rpx;
      color: #333333;
    }
    .section_9 {
      margin-top: 18rpx;
      padding: 25rpx 20rpx 43rpx;
      background-color: #ffffff;
      .text_17 {
        align-self: flex-start;
        line-height: 34rpx;
      }
      .divider {
        margin-top: 20rpx;
        background-color: #f1f1f1;
        height: 2rpx;
      }
      .space-x-127 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 127rpx;
        }
        .image_14 {
          width: 45rpx;
          height: 45rpx;
        }
        .image_15 {
          width: 54rpx;
          height: 45rpx;
        }
      }
      .group_9 {
        margin-top: 31rpx;
        padding: 0 65rpx;
      }
      .space-x-62 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 62rpx;
        }
        .text_18 {
          line-height: 26rpx;
        }
      }
      .group_10 {
        margin-top: 20rpx;
        padding: 0 33rpx;
      }
    }
    .font_7 {
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      line-height: 27rpx;
      font-weight: 300;
      color: #666666;
    }
    .section_10 {
      margin-top: 19rpx;
      padding: 0 20rpx 30rpx;
      background-color: #ffffff;
      .group_11 {
        padding: 30rpx 20rpx 29rpx 21rpx;
        border-bottom: solid 2rpx #f1f1f1;
        .text_19 {
          line-height: 32rpx;
        }
        .image_16 {
          margin: 6rpx 0 5rpx;
        }
      }
      .group_12 {
        padding: 29rpx 20rpx 28rpx;
        border-bottom: solid 2rpx #f1f1f1;
        .text_20 {
          line-height: 32rpx;
        }
        .text_21 {
          margin-bottom: 4rpx;
          color: #999999;
          line-height: 26rpx;
        }
      }
      .font_9 {
        font-size: 32rpx;
        font-family: Microsoft YaHei;
        line-height: 33rpx;
        color: #333333;
      }
    }
    .image_9 {
      margin: 4rpx 0;
      width: 11rpx;
      height: 21rpx;
    }
  }
}
</style>
